<!DOCTYPE html>
<html>
    <head>
        <script src="js/vue.js"></script>
        <script src="js/lodash.js"></script>
        <style>
            .list-item {
                display: inline-block;
                margin-right: 10px;
                background-color: red;
                border-radius: 50%;
                width: 25px; 
                height: 25px; 
                text-align: center;
                line-height: 25px;
                color: #fff; 
            }

            .list-enter-active{
                transition: all 1.5s;
            }

            .list-leave-active {
                transition: all 1.5s;
                position: absolute;
            }

            .list-enter, .list-leave-to {
                opacity: 0;
                transform: translateY(50px) scale(3) rotate(360deg);
            }

            .list-move {
                transition: transform 1s;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <button @click="add">随机插入一个数字</button>
            <button @click="remove">随机移除一个数字</button>
            <button @click="shuffle">洗牌</button>
            <transition-group name="list" tag="p" >
                <span v-for="item in items" :key="item" class="list-item">
                    {{item}}
                </span>
            </transition-group>
        </div>
        <script>
            var vm = new Vue({
                el:'#app',
                data:{
                    items : [1,2,3,4,5,6,7],
                    nextNum : 8
                },
                methods : {
                    randomIndex(){
                        return Math.floor(Math.random() * this.items.length);
                    },
                    add(){
                        this.items.splice(this.randomIndex(),0,this.nextNum++);
                    },
                    remove(){
                        this.items.splice(this.randomIndex(),1);
                    },
                    shuffle(){
                        this.items = _.shuffle(this.items);
                    }
                }
            });
        </script>
    </body>
</html>